<template>
    <div class="wrapper" ref="wrapper">
        <div class="search">
        <div class="search-input">
            <input type="text" placeholder="搜索歌单、歌曲、专辑">
        </div>
        <div class="search-hot">
            <div class="search-hot-title">热门搜索</div>
            <div class="search-hot-song">
                <div
                    class="search-hot-song-item"
                    v-for="(item, index) of searchHot.hotkey"
                    v-if="index<=9"
                    :key="item.n"
                    >{{item.k}}</div>
            </div>
            <ul class="searchList"></ul>
        </div>
        </div>
    </div>
</template>

<script>
// 引入axios
import axios from 'axios'
export default {
  name: 'search',
  data () {
    return {
      searchHot: []
    }
  },
  methods: {
    getRankInfo () {
      // 获取ajax数据
      axios.get('/api/splcloud/fcgi-bin/gethotkey.fcg')
        .then(this.getRankInfoSucc)
    },
    getRankInfoSucc (res) {
      console.log(res.data)
      this.searchHot = res.data.data
      console.log(this.searchHot)
    }
  },
  mounted () {
    this.getRankInfo()
  }
}
</script>

<style lang="less" scoped>
    @import '../../assets/less/variable.less';
    .wrapper{
        width: 100%;
        position:fixed;
        top: 84px;
        bottom: 0px;
        overflow: hidden;
        z-index: 1;
        background: #fff;
        .search{
            width: 100%;
            height: 0;
            padding-bottom: 100%;
            .box-sizing();
            .search-input{
                width: 100%;
                padding: 10px;
                background: #eee;
                .box-sizing();
                input{
                    width: 100%;
                    height: 36px;
                    line-height: 36px;
                    border-radius: 3px;
                    border: 0;
                    padding: 0 10px;
                    .box-sizing();
                    font-family: 'Microsoft YaHei';
                    outline: none;
                }
            }
            .search-hot{
                padding: 10px;
                background: #fff;
                .search-hot-title{
                    font-size: 15px;
                    color: @text;
                }
                .search-hot-song{
                    margin-top: 10px;
                    .search-hot-song-item{
                        height: 25px;
                        line-height: 25px;
                        padding: 0 15px;
                        margin: 0 0 10px 10px;
                        float: left;
                        border: solid 1px #ccc;
                        border-radius: 15px;
                    }
                }
                .searchList{
                    width: 100%;
                }
            }
        }
    }
</style>
